<!--简单通用的分类列表-->
<template>
<el-card class="right-card">
  <div class="handle-box">
    <el-button size="mini"  type="primary" class="handle-del mr10" @click="add">新增</el-button>
    <el-input size="mini"  v-model="keyword" placeholder="筛选名称" class="handle-input mr10"></el-input>
    <el-button size="mini"  type="primary" icon="search" @click="query">筛选</el-button>
  </div>
  <el-table style="width:100%" :data="tableData.records" border  :header-cell-style="{background:'#F5F7FA'}" ref="multipleTable" >
    <el-table-column type="index" label="序号" align="center" width="50"/>
      <el-table-column prop="fdName" label="分类名称" sortable />
      <el-table-column prop="fdParentName" label="上级分类名称" sortable width="150"/>
      <el-table-column prop="fdOrder" label="排序号" sortable width="150"/>
      <el-table-column prop="fdCreatorName" label="创建人" sortable width="150"/>
      <el-table-column prop="fdCreateTime" label="创建时间" :formatter="dateFormat" sortable width="150"/>
    <el-table-column label="操作" width="180" align="center">
      <template slot-scope="scope">
        <el-button size="mini"  @click="handleEdit(scope.row)">编辑</el-button>
        <el-button size="mini"  type="danger" @click="handleDelete(scope.$index, scope.row)">删除</el-button>
      </template>
    </el-table-column>
  </el-table>
  <div class="pagination">
    <el-pagination background @current-change="handleCurrentChange" :page-size="tableData.size" layout="prev, pager, next" :total="tableData.total"/>
  </div>
</el-card>
</template>
<script>
//引入默认的修改列表
import dateUtil from '@/utils/dateUtils';
export default {
  name:'fancySysCategoryList',
  props:{
    id:{
      type:String,
      default:''
    },
    name:{
      type:String,
      default:''
    },
    modelName: {
      type: String,
      default:''
    },
    modelKey: {
      type: String,
      default:'category'
    }
  },
  data(){
    return {
      tableData:{
        keyword: '',
        size:0,
        total:0,
        current:1,
        records: []
      },
      keyword: ''
    }
  },
  created() {
    this.getData();
  },
  methods:{
    add() {
        const params = {
            path: "/sys/category/sys_category_main/edit",
            query: {
              parentId:this.id,
              parentName:this.name,
              modelName:this.modelName,
              modelKey:this.modelKey
            } 
        }
        this.$common.openTag(params);
    },
    getData() {
        this.$post('/api/sys/category/sys_category_main/list',{
            keyword: this.tableData.keyword,
            current: this.tableData.current,
            parentId:this.id,
            modelName:this.modelName,
            modelKey:this.modelKey
        }).then((res) => {
            this.tableData = res.data;
        });
    },
    query(){
        this.tableData.keyword = this.keyword;
        this.getData();
    },
    dateFormat(obj,column){
      return dateUtil.format(obj.fdCreateTime);
    },
    handleEdit(row){
        let id = row.fdId;
        const params = {
            path: "/sys/category/sys_category_main/edit",
            query: {
              id:id,
              parentId:this.id,
              parentName:this.name,
              modelName:this.modelName,
              modelKey:this.modelKey
            }
        }
        this.$common.openTag(params);
    },
    handleDelete(index,row){
        this.$confirm('此操作将删除该条记录,是否继续?').then(() => {
            this.$delete('/api/sys/category/sys_category_main',{
                id:row.fdId
            }).then((res) => {
                this.tableData.records.splice(index,1)
                this.$message({type:'success',message:'删除成功!'})
            });
        })
    },
    handleCurrentChange(value){
        this.tableData.current = value;
        this.tableData.keyword = this.keyword;
        this.getData();
    }
  },
  watch:{
    id(newVal) {
      this.getData();
    }
  }
}
</script>
<style>

</style>